<template>
  <el-drawer
    :size="size"
    :title="title"
    :direction="'rtl'"
    :wrapperClosable="false"
    :visible.sync="visible"
    :append-to-body="appendToBody"
    :modal-append-to-body="modalAppenToBody"
    :before-close="beforeClose"
    @close="closeDrawer"
    class="drawer-wrapper"
  >
    <div slot='title' v-if='useTitleSlot'>
      <slot name='title'></slot>
    </div>
    <div class="handle-wrapper">
      <div :style="{height: isShowBtn ? `calc(100% - ${footerHeight})`: '100%', boxShadow: 'inset 0px 0px 10px rgba(0,0,0,0.1)'}" class="handle-body">
        <slot name="body"></slot>
      </div>
      <div v-if="isShowBtn" :style="{textAlign: btnTextAlign}" class="handle-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </el-drawer>
</template>
<script>
export default {
  props: {
    // 是否显示抽屉
    visible: {
      type: Boolean,
      default: false
    },
    // Drawer 自身是否插入至 body 元素上
    appendToBody: {
      type: Boolean,
      default: false
    },
    // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上
    modalAppenToBody: {
      type: Boolean,
      default: true
    },
    title: String,
    // 抽屉宽度大小
    size: {
      type: String,
      default: '50%'
    },
    // 是否显示底部按钮
    isShowBtn: {
      type: Boolean,
      default: true
    },
    // 底部按钮的横向对齐方式
    btnTextAlign: {
      type: String,
      default: 'center'
    },
    // 是否显示内容阴影(true:显示上下边框、下边框阴影，false显示下边框的阴影)
    isShowShadow: {
      type: Boolean,
      default: false
    },
    // 底部高度
    footerHeight: {
      type: String,
      default: '50px'
    },
    // 是否使用标题slot
    useTitleSlot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 关闭时重置表单等
    closeDrawer () {
      this.$emit('closeDrawer')
    },
    // 点击X关闭抽屉
    beforeClose () {
      this.$emit('beforeClose')
    }
  }
}
</script>
<style lang="stylus" scoped>
.drawer-wrapper
  >>> .el-drawer
    // min-width 780px
    width 780px
  >>> .el-drawer__header
    margin-bottom 25px!important
  >>> .el-dialog
    margin-top 0 !important
    margin-bottom 0 !important
    max-width 1200px
    min-width 1000px
    height 100vh
    // .el-dialog__header
    //   padding 20px 40px 10px
    // .el-dialog__body
    //   padding 0 40px
  >>> .tox-dialog-wrap
    border 1px solid red
    z-index 3000 !important
  .handle-wrapper
    height calc(100vh - 74px)
    display flex
    flex-direction column
    .handle-body
      scroll()
      scroll-bar()
      padding 15px
      box-sizing border-box
      .personal-wrapper
        // between()
        padded_box(border-box, 0px 60px)
        .personal-right
          // flex 1
          >>> .el-textarea
            max-width 640px
    .handle-footer
      display block
      padding 10px
</style>
